<template>
  <!--登陆注册-->
  <div id="app">
    <div class="on">
      <section class="loginContainer">
        <div class="loginInner">
          <div class="login_header">
            <h2 class="login_logo">饿了么</h2>
            <div class="login_header_title">
              <a href="javascript:;" :class="{ on: loginWay }"  @click="setLoginWay(true)">短信登录</a>
              <a href="javascript:;" :class="{ on: !loginWay }" @click="setLoginWay(false)">密码登录</a>
            </div>
          </div>
          <div class="login_content">
            <form>
              <div v-show="loginWay">
                <section class="login_message">
                  <input type="tel" maxlength="11" placeholder="手机号" v-model="phone">
                  <button class="get_verification"
                          :class="{right_phone: rightPhone}" v-show="!computeTime" @click.prevent="getCode">获取验证码
                  </button>
                  <button class="get_verification" v-show="computeTime">{{computeTime}}s</button>
                </section>
                <section class="login_verification">
                  <input type="tel" maxlength="8" placeholder="验证码">
                </section>
                <section class="login_hint">
                  温馨提示：未注册硅谷外卖帐号的手机号，登录时将自动注册，且代表已同意
                  <a href="javascript:;">《用户服务协议》</a>
                </section>
              </div>
              <div v-show="!loginWay">
                <section>
                  <section class="login_message">
                    <input type="tel" maxlength="11" placeholder="手机/邮箱/用户名">
                  </section>
                  <section class="login_verification">
                    <input type="tel" maxlength="8" placeholder="密码">
                    <div style="position: absolute; right: 3%;top: 30%;">
                    <el-switch
                      v-model="value2"
                      active-color="#13ce66"
                      inactive-color="#ff4949">
                    </el-switch>
                    </div>
                  </section>
                  <section class="login_message">
                    <input type="text" maxlength="11" placeholder="验证码">
                    <img class="get_verification" src="../../../../assets/images/captcha.svg" alt="captcha">
                  </section>
                </section>
              </div>
              <router-link to="/msite">
                <button class="login_submit" @click="">登录</button>
              </router-link>
            </form>
            <a href="javascript:;" class="about_us">关于我们</a>
          </div>
          <a href="javascript:" class="go_back">
            <i class="iconfont icon-jiantou2"></i>
          </a>
        </div>
      </section>
    </div>
    <alert-tip v-if="alertShow" :alertText="alertText" @closeTip="closeTip"/>
  </div>
</template>
<script>
  // import '../../../../assets/commonjs/index'
  import { pwdLogin, smsLogin, sendcode} from '../../../../assets/api/index'
  // import '../../../../assets/commonjs/swiper'
  import AlertTip from '../../../pages/alerttip/AlertTip.vue'

  export default {
    components: {
      AlertTip
    },
    data() {
      return {
        show: true,
        show_two:false,
        isActive:true,
        isActive1:false,
        value1: true,
        value2: true,
        alertText: '', // 提示框文本
        alertShow: false, //是否显示提示框
        computeTime: 0, //计时时间
        showPassword: false, // 是否显示密码
        loginWay: true, // true代表短信登陆, false密码登陆
        phone: '', //手机号
        code: '', //短信验证码
        name: '', //用户名
        pwd: '', // 密码
        arr12:[],
        obj:[]
      }
    },
    computed:{
      rightPhone () {// 以1开头的11数字
        return /^1[34578]\d{9}$/.test(this.phone)
      }
    },
  mounted(){
      this.msg()
      // this.jiantouy()
  },
  methods:{
    // 1. 定义（路由）组件。
    // 可以从其他文件 import 进来
    Foot(){
      const Foo = {

      }
    },
      jiantouy(){
        let smss = a => a
        let sms = (a,b) => a+b
        const a1 = '123'
        let a = (a,b) =>{
          if(typeof a == "number" || typeof b == "number"){
            return a+b
          }else{
            return 0
          }
        };
        console.log(a(2,5));
        let arr1 = arr =>{
         return ({
            age:'12',
            name:'liangyu'
          })
          // return ({
          //   age:'12',
          //   name:'liangyu'
          // })
        }
        console.log(arr1());
        // document.addEventListener('click',()=> alert(123))
        var arr = [5,6,7,8,9].sort((a,b)=>{
          if(a - b < 0){
            return a - b
          }else {
            return 1
          }
        });
        console.log(arr);
        var func = a => a;
        console.log(typeof func(a))
        // obj ={
        //   data:['John Backus', 'John Hopcroft'],
        //   init:function () {
        //     document.onclick = ev =>{
        //       alert(this.data)
        //     }
        //   }
        // }
        // var name = (name1,age) =>{
        //   this.name = name1
        //   this.age = age
        // }
        // // new error
        // var test = () =>{
        //   console.log(arguments)
        // }
        // test(1)
        // var func1 = () => {
        //   console.log(arguments[0])
        // }
        // func1(55) //
      },
      msg(){
        console.log(this.$store.getters.logina)
        this.$store.commit('logina',this.phone)
      },
    setLoginWay (loginWay) {
      this.loginWay = loginWay
    },
      //登陆界面切换密码明/暗文
      show1(){
        this.show = !this.show;
        this.show_two = !this.show_two;
        this.isActive = !this.isActive;
        this.isActive1 = !this.isActive1
      },
    async geilogin_one(){
     // let a  = await this.$axios.get('/api/sendcode')
      const result = await sendCode(this.phone)
      console.log(a)
    },

    async getCode () {
      if (this.rightPhone) { // 输入了合法的手机号
        // 开始倒计时
        const result = await sendcode(this.phone)
        if(result.code === 0){
          this.computeTime = 60
          // 启动循环定时器, 每隔1s减少1
          const intervalId = setInterval(() => {
            this.computeTime--
            //如果到时, 停止计时
            if (this.computeTime === 0) {
              clearInterval(intervalId)
            }
          }, 1000)  // 发ajax请求, 向手机号发验证码
        }else if (result.code === 1) {
          // clearInterval(intervalId)
          // 显示提示框
          this.alertShow = true;
          this.alertText = result.msg
        }
      }else if(!this.rightPhone){
        this.alertShow = true
        this.alertText = '输入手机号有问题哦'
      }


    },
    // 切换密码的显示和隐藏
    switchShowPassword () {
      this.showPassword = !this.showPassword
    },

    // 改变验证码图片
    changeCaptcha (event) {
      event.target.src = 'http://localhost:3000/captcha?time=' + new Date()
    },

    // 登陆
    async login () {
      let result
      if(this.loginWay) { // 短信登陆
        const {rightPhone, phone, code} = this
        // 表单验证
        if(!rightPhone) { // 手机号
          this.alertShow = true
          this.alertText = '请输入正确的手机号'
          return
        } else if(!/^\d{6}$/.test(code)) { // 验证码
          this.alertShow = true
          this.alertText = '请输入正确的验证码'
          return
        }
        // 提交登陆请求
        result = await smsLogin({phone, code})

        // 处理返回
      } else {// 密码登陆
        const {name, pwd, captcha} = this
        // 表单验证
        if(!name) { // 用户名
          this.alertShow = true
          this.alertText = '请输入用户名'
          return
        } else if(!pwd) { // 密码
          this.alertShow = true
          this.alertText = '请输入密码'
          return
        } else if(!captcha) { // 图片验证码
          this.alertShow = true
          this.alertText = '请输入验证码'
          return
        }
        // 提交登陆请求
        result = await pwdLogin({name, pwd, captcha})

        // 处理返回
      }

      if(result.code===0) {
        // 得到用户信息
        const userInfo = result.data
        // 保存到state中去
        this.$store.dispatch('recordUserInfo', userInfo)
        // 回退
        this.$router.back()
      } else {
        this.alertShow = true
        this.alertText = result.msg
      }
    },
    closeTip () {
      this.alertShow = false
    },
      header_tiele(){

      },
  }

  }
  export const accountLogin = (name, pwd, captcha) => ajax('/api/login_pwd', {
    name,
    pwd,
    captcha
  }, 'POST')
</script>

<style lang="stylus" >

  #app >.on .loginContainer {
    width: 100%;
    height: 100%;
    background: #fff;
  }
  #app >.on .loginContainer .loginInner {
    padding-top: 60px;
    width: 80%;
    margin: 0 auto;
  }
  #app >.on .loginContainer .loginInner .login_header .login_logo {
    font-size: 40px;
    font-weight: bold;
    color: #008de1;
    text-align: center;
  }
  #app >.on .loginContainer .loginInner .login_header .login_header_title {
    padding-top: 40px;
    text-align: center;
  }
  #app >.on .loginContainer .loginInner .login_header .login_header_title >a {
    color: #333;
    font-size: 14px;
    padding-bottom: 4px;
  }
  #app >.on .loginContainer .loginInner .login_header .login_header_title >a:first-child {
    margin-right: 40px;
  }
  #app >.on .loginContainer .loginInner .login_header .login_header_title >a.on {
    color: #008de1;
    font-weight: 700;
    border-bottom: 2px solid #008de1;
  }
  #app >.on .loginContainer .loginInner .login_content >form >div {
    /*display: none;*/
  }
  #app >.on .loginContainer .loginInner .login_content >form >div.on {
    display: block;
  }
  #app >.on .loginContainer .loginInner .login_content >form >div input {
    width: 100%;
    height: 100%;
    padding-left: 10px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 4px;
    outline: 0;
    font: 400 14px Arial;
  }
  #app >.on .loginContainer .loginInner .login_content >form >div input:focus {
    border: 1px solid #008de1;
  }
  #app >.on .loginContainer .loginInner .login_content >form >div .login_message {
    position: relative;
    margin-top: 16px;
    height: 48px;
    font-size: 14px;
    background: #fff;
  }
  #app >.on .loginContainer .loginInner .login_content >form >div .login_message .get_verification {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    border: 0;
    color: #ccc;
    font-size: 14px;
    background: transparent;
  }
  #app >.on .loginContainer .loginInner .login_content >form >div .login_verification {
    position: relative;
    margin-top: 16px;
    height: 48px;
    font-size: 14px;
    background: #fff;
  }
  #app >.on .loginContainer .loginInner .login_content >form >div .login_verification .switch_button {
    font-size: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    transition: background-color 0.3s, border-color 0.3s;
    padding: 0 6px;
    width: 30px;
    height: 16px;
    line-height: 16px;
    color: #fff;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
  }
  #app >.on .loginContainer .loginInner .login_content >form >div .login_verification .switch_button.off {
    background: #fff;
  }
  #app >.on .loginContainer .loginInner .login_content >form >div .login_verification .switch_button.off .switch_text {
    float: right;
    color: #ddd;
  }
  #app >.on .loginContainer .loginInner .login_content >form >div .login_verification .switch_button.on {
    background: #008de1;
  }
  #app >.on .loginContainer .loginInner .login_content >form >div .login_verification .switch_button >.switch_circle {
    position: absolute;
    top: -1px;
    left: -1px;
    width: 16px;
    height: 16px;
    border: 1px solid #ddd;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
    transition: transform 0.3s;
  }
  #app >.on .loginContainer .loginInner .login_content >form >div .login_hint {
    margin-top: 12px;
    color: #999;
    font-size: 14px;
    line-height: 20px;
  }
  #app >.on .loginContainer .loginInner .login_content >form >div .login_hint >a {
    color: #008de1;
  }
  #app >.on .loginContainer .loginInner .login_content >form .login_submit {
    display: block;
    width: 100%;
    height: 42px;
    margin-top: 30px;
    border-radius: 4px;
    background: #008de1;
    color: #fff;
    text-align: center;
    font-size: 16px;
    line-height: 42px;
    border: 0;
  }
  #app >.on .loginContainer .loginInner .login_content .about_us {
    display: block;
    font-size: 12px;
    margin-top: 20px;
    text-align: center;
    color: #999;
  }
  #app >.on .loginContainer .loginInner .go_back {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 30px;
    height: 30px;
  }
  #app >.on .loginContainer .loginInner .go_back >.iconfont {
    font-size: 20px;
    color: #999;
  }
  login_header_title a
    cursor: pointer
</style>
